<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.userName" placeholder="姓名" style="width:180px;" clearable ></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.account" placeholder="帐号" style="width:180px;" clearable ></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getStudents">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleMove" :disabled="this.sels.length===0">转班</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="tableData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="30">
			</el-table-column>
			<el-table-column type="index" label="序号" width="50" fixed>
				<template slot-scope="scope">   
                    {{pageSize*(nowPage-1)+scope.$index+1}}
                </template>
			</el-table-column>
			<el-table-column prop="userName" label="姓名" min-width="120" align='center'>
			</el-table-column>
			<el-table-column prop="gender" label="性别" width="50">
				<template slot-scope="scope">
					{{scope.row.gender=="0"?"男":"女"}}
				</template>
			</el-table-column>
			<el-table-column prop="account" label="帐号" min-width="120" align='center'>
			</el-table-column>
			<el-table-column prop="studentNo" label="学籍号" min-width="120" align='center'>
			</el-table-column>
			<el-table-column prop="phaseName" label="学段" min-width="120" align='center'>
			</el-table-column>
			<el-table-column prop="classesName" label="班级" min-width="120" align='center'>
			</el-table-column>
			<el-table-column prop="birthday" label="出生日期" min-width="120" align='center'>
			</el-table-column>
			<el-table-column prop="phone" label="手机" min-width="120" align='center'>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="text-align: center; ">
			</el-pagination>
		</el-col>

		
		 <!-- 学生转班 -->
        <el-dialog title="转班" v-if="moveSchoolVisible" :visible.sync="moveSchoolVisible" >
            <el-form ref="moveSchool" :model="moveForm" label-width="110px">
               <el-form-item label="转入的班级：">
					<el-select v-model="moveForm.phaseId" placeholder="请选择学段" @change="getEditGradeList(moveForm.phaseId)" style="width:120px;" clearable>
						<el-option v-for="(item,i) in phaseList" :key="i" :label="item.phaseName" :value="item.phaseId"></el-option>
					</el-select>
					<el-select v-model="moveForm.gradeId" placeholder="请选择年级" @change="getEditClassesList(moveForm.phaseId,moveForm.gradeId)" style="width:120px;" clearable>
						<el-option v-for="(item,i) in editGradeList" :key="i" :label="item.gradeName" :value="item.gradeId"></el-option>
					</el-select>
					<el-select v-model="moveForm.classesId" placeholder="请选择班级" style="width:120px;" clearable>
						<el-option v-for="(item,i) in editClassesList" :key="i" :label="item.classesName" :value="item.classesId"></el-option>
					</el-select>
				</el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="moveSchoolVisibleClose">取 消</el-button>
                <el-button type="primary" @click="moveStudent">确 定</el-button>
            </div>
        </el-dialog>
		
	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	//import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
	import { SysApi } from '@/api/index'

	export default {
		data() {
		
			return {
				filters: {
					schoolId: JSON.parse(sessionStorage.getItem("schoolId")),
					userName: '',
					account: '',
					isGraduated: 1
				},
				sels: [],//列表选中列
				tableData: [],
				total: 0,
				listLoading: true,
				phaseList: [],
				gradeList: [],
				classesList: [],
				editGradeList: [],
				editClassesList: [],
				phaseId: '',
				schoolName: '',
				schoolId:  JSON.parse(sessionStorage.getItem("schoolId")),
				provinceCode: JSON.parse(sessionStorage.getItem("provinceCode")),
				cityCode: JSON.parse(sessionStorage.getItem("cityCode")),
				districtCode: JSON.parse(sessionStorage.getItem("districtCode")),

				//学生信息表单
				studentForm: {
					schoolId: JSON.parse(sessionStorage.getItem("schoolId")),
					schoolName: JSON.parse(sessionStorage.getItem("schoolName")),
					provinceCode: JSON.parse(sessionStorage.getItem("provinceCode")),
					cityCode: JSON.parse(sessionStorage.getItem("cityCode")),
					districtCode: JSON.parse(sessionStorage.getItem("districtCode")),
					userId: '',
					userName: '',
					phone: '',
					gender: '',
					studentNo: '',
					phaseId: '',
					gradeId: '',
					classesId: '',
					birthday: '',
					type: '',
					useType: '',
				},

				moveForm: {
					phaseId: '',
					gradeId: '',
					classesId: ''
				},

				genderOptions: [{
					"label": "男",
					"value": 0
				}, {
					"label": "女",
					"value": 1
				}],

				moveSchoolVisible: false,

				roleList: [],
				pageSize: 10,
				nowPage: 1,

			}
		},
		created(){
			if(this.$route.params.schoolId != undefined){
				sessionStorage.setItem("schoolId", JSON.stringify(this.$route.params));
				this.schoolId = this.$route.params.schoolId;
			}else{
				this.schoolId = JSON.parse(sessionStorage.getItem("schoolId"));
			}  
			//获取学生列表
			this.getStudents();
			//获取学段列表
			this.getPhaseList();
		},
		mounted() {
			 //获取学生列表
			//this.getStudents();
		},
		methods: {
			//性别显示转换
			formatSex: function (row, column) {
				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
			},
			handleCurrentChange(val) {
				this.nowPage = val;
				this.getStudents();
			},
			//获取学段列表
			getPhaseList(){
				let params = {
					schoolId: this.schoolId
				};
				SysApi.getSchoolPhaseList(params, res => {
					if (res!=null)
					{
						this.phaseList = res;
					}
				}, (errorType, error) => {
				})
			},
			//获取年级列表
			getGradeList(phaseId){
				this.gradeList = [];
				this.classesList = [];
				if (phaseId!=null && phaseId!="")
				{
					let params = {
						phaseId: phaseId
					};
					SysApi.getGradeList(params, res => {
						if (res!=null)
						{
							this.gradeList = res;
						}
					}, (errorType, error) => {
					})
				}
		
			},
			//获取年级列表
			getClassesList(phaseId,gradeId){
				this.classesList = [];
				if (phaseId!=null && phaseId!="" && gradeId!=null && gradeId!="")
				{
					let params = {
						schoolId: this.schoolId,
						phaseId: phaseId,
						gradeId: gradeId
					};
					SysApi.getClassesList(params, res => {
						if (res!=null)
						{
							this.classesList = res;
						}
					}, (errorType, error) => {
					})
				}
			},
			//获取年级列表
			getEditGradeList(phaseId){
				this.studentForm.gradeId = '';
				this.studentForm.classesId = '';
				this.editGradeList = [];
				this.editClassesList = [];
				if (phaseId!=null && phaseId!="")
				{
					let params = {
						phaseId: phaseId
					};
					SysApi.getGradeList(params, res => {
						if (res!=null)
						{
							this.editGradeList = res;
						}
					}, (errorType, error) => {
					})
				}
			},
			//获取年级列表
			getEditClassesList(phaseId,gradeId){
				this.studentForm.classesId = '';
				this.editClassesList = [];
				if (phaseId!=null && phaseId!="" && gradeId!=null && gradeId!="")
				{
					let params = {
						schoolId: this.schoolId,
						phaseId: phaseId,
						gradeId: gradeId
					};
					SysApi.getClassesList(params, res => {
						if (res!=null)
						{
							this.editClassesList = res;
						}
					}, (errorType, error) => {
					})
				}
			},
			//获取用户列表
			getStudents() {
				let params = {
					pageNum: this.nowPage,
					pageSize: this.pageSize,
					schoolId: this.schoolId,
					userName: this.filters.userName,
					account: this.filters.account,
					isGraduated: 1
				};
				this.listLoading = true;

				SysApi.getSchoolStudentListPage(params,res =>{
					this.total = res.total;
					this.tableData = res.list;
					this.listLoading = false;
				}, (errorType, error) => {
					this.listLoading = false;
				})


			},
			
			selsChange: function (sels) {
				this.sels = sels;
			},
			//显示编辑界面
			handleMove: function () {
			
				this.moveSchoolVisible = true;
				this.moveForm.phaseId = ''
				this.moveForm.gradeId = ''
				this.moveForm.classesId = ''
				
			},
			moveSchoolVisibleClose: function () {
			
				this.moveSchoolVisible = false;
				
			},
			//批量转校
			moveStudent: function () {
				var ids = this.sels.map(item => item.userId).toString();
				this.$confirm('确认将选中学生转班吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;

					let params = {
						 studentIds: ids,
						 schoolId: this.schoolId,
						 phaselId: this.moveForm.phaselId,
						 classesId: this.moveForm.classesId
						 };

					SysApi.moveStudent(params).then((res) => {

						this.$message({
							message: '转班成功',
							type: 'success'
						});
						this.getStudents();
						this.listLoading = false;
						this.moveSchoolVisible = false;
					});
				}).catch(() => {

				});
			},
			closeDialog: function () {
				this.$refs['studentForm'].resetFields();
				this.editFormVisible = false;
			},
			
			
		},
		
	}

</script>

<style>
.el-table >.el-table__fixed {
    height: 100% !important; 
  }
.el-table >.el-table__fixed-right {
    height: 100% !important; 
  }
.el-table--scrollable-x .el-table__body-wrapper {
    z-index: 1;
  }
</style>